<template>
    <van-overlay :show="show" z-index="100">
        <div class="overlay row">
            <div class="main">
                <van-nav-bar
                    class="navBar"
                    :title="title"
                    left-text="返回"
                    left-arrow
                    :right-text="rightText"
                    @clickLeft="$emit('close')"
                    @clickRight="$emit('clickRight')"
                    :safe-area-inset-top="false"
                >
                    <slot name="right" />
                </van-nav-bar>
                <!--  TODO FIXME 这里没有显示出来 -->
                <div class="inner-slot">
                    <slot></slot>
                </div>
            </div>
        </div>
    </van-overlay>
</template>

<script>
import vanNavBar from "@/wxcomponents/weapp/dist/nav-bar/index";
export default {
    components: { vanNavBar },
    props: ["title", "show", "rightText"],
};
</script>

<style lang="less" scoped>
.main {
    height: 80%;
    width: 80%;
    background-color: #fafafa;
    border-radius: 32rpx;
    overflow: scroll;
    position: relative;
}
.overlay {
    height: 100%;
    width: 100%;
}
.navBar {
    width: 100%;
    position: absolute;
}
.inner-slot {
    margin: var(--nav-bar-height, 46px) 0 0 0;
    overflow: hidden;
    height: calc(100%-var(--nav-bar-height, 46px));
}
</style>